import React, { Component } from 'react'
import Header from './components/Header/Header'
import List from './components/List/List'
import Footer from './components/Footer/Footer'
export default class App extends Component {
    // 初始化状态
    state = {
        todos: [{
            name: '吃饭',
            id: '001',
            done: false
        }, {
            name: '睡觉',
            id: '002',
            done: false
        }, {
            name: '敲代码',
            id: '003',
            done: false,
        }]
    }
    // 改变数组
    updateTodo = (id, done) => {
        // 获取状态中的列表
        let { todos } = this.state
        // 处理匹配数据
        const newTodos = todos.map((v) => {
            if (v.id === id) return { ...v, done }
            else return v
        })
        // 重新赋值渲染
        this.setState({ todos: newTodos })
    }
    // 删除某一项
    deleteTodo = (id) => {
        // 获取状态中的列表
        let { todos } = this.state
        let newTodosList = todos.filter(v => v.id !== id)
        this.setState({ todos: newTodosList })
    }
    // 数组添加
    addTodo = (todoObj) => {
        // 获取源todos
        let { todos } = this.state
        // 追加todo
        let newTodos = [todoObj, ...todos]
        // 修改
        this.setState({ todos: newTodos })
    }
    // 全选
    listAllCheck = (done) => {
        // 拿到原来得状态
        let { todos } = this.state
        // 过滤
        const newTodos = todos.map((v) => {
            return { ...v, done }
        })
        // 放回
        this.setState({todos:newTodos})
    }
    // 清除所有已完成
    delelteAllDone = () => {
        let {todos} = this.state
        let newTodos = todos.filter(v=>!v.done)
        this.setState({todos:newTodos})
    }
    render() {
        const { todos } = this.state
        return (
            <div>
                <Header addTodo={this.addTodo} />
                <List todos={todos} deleteTodo={this.deleteTodo} updateTodo={this.updateTodo} />
                <Footer todos={todos} delelteAllDone={this.delelteAllDone} listAllCheck={this.listAllCheck} />
            </div>
        )
    }
}
